<template>
<!--  在vue3中不用在加外层的容器标签了-->
<!--  用了ref函数 模板中不用调用.value vue会自动帮你调用-->
  <h3>我的名字:{{name}}</h3>
  <h3>我的年龄:{{age}}</h3>
  <h3>我的工作:{{job.name}}</h3>
  <h3>我的薪水:{{job.salary}}</h3>
  <button @click="sayHello">自我介绍</button>
  <button @click="changeNameAndAge">点我修改信息</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  // vue3中的方法 数据 。。。都都在这个函数中定义 vue2和vue3可以混用但不建议 不好
  setup() {
    // 定义数据 把数据做成响应式 就用ref函数 但是数据会变成一个对象 需要用对象的value属性拿数据
    let name = ref('张三');
    let age = ref(18);
    let job = ref({
      name:'前端工程师',
      salary:80000
    })
    //定义函数
    function sayHello() {
      //用value的.value拿属性
      alert(`大家好 我是${name.value} 年龄${age.value}`);
    }
    function changeNameAndAge() {
      // name.value = '李四';
      // age.value = 40;
      //修改对象类型的数据 对象类型的数据 没有将对象中的属性转换为对象 还是一个睡醒
      job.value.name = '后端工程师';
      job.value.salary = 70000;
    }
    // 最后要返回这些东西 要不然模板用不了
    return {
      name,
      age,
      sayHello,
      changeNameAndAge,
      job
    }
    //第二种方法渲染模板(不常用) 第一个参数 标签名字 第二个参数标签内容
    // return () => h("h1",'你好')
  }
}
</script>

<style>

</style>
